<template>
  <el-form
      :model="queryForm"
      ref="queryFormRef"
      :inline="true"
      label-width="70px"
  >
    <el-form-item label="登录地址" prop="ipaddr">
      <el-input
          v-model="queryForm.ipaddr"
          placeholder="请输入登录地址"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery()"
      />
    </el-form-item>
    <el-form-item label="角色名称" prop="userName">
      <el-input
          v-model="queryForm.userName"
          placeholder="请输入角色名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery()"
          @change="handleQuery()"
      />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select
          v-model="queryForm.status"
          placeholder="角色状态"
          clearable
          @change="handleQuery()"
          style="width: 240px"
      >
        <el-option
            v-for="dict in statusOptions"
            :key="dict.label"
            :label="dict.label"
            :value="dict.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="登录时间" style="font-weight: bold">
      <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          @change="handleQuery()"
      ></el-date-picker>
    </el-form-item>
    <el-form-item class="item-search">
      <el-button @click="resetClick">重置</el-button>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
    </el-form-item>
  </el-form>
  <Tbale
      :isSelect="true"
      :table-data="tableData"
      :table-column="tableColumn"
      @pagination-change="getList"
      v-model:page-num="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :total="total">
    <template #edit="{row}">

      <el-link
          class="el-link-spacing"
          :underline="false"
          size="small"
          type="danger"
          icon="delete"
          @click="handleDelete(row)"
      ><span class="table_link_text">删除</span></el-link>
    </template>
  </Tbale>


</template>
<script lang="ts" setup>
import Tbale from "@/components/Table/ElTable.vue";
import {getCurrentInstance, nextTick, onMounted, ref} from "vue";


import {addDateRange} from "@/utils/z.ts";
import {ElForm, ElMessage, ElMessageBox, ElTree} from "element-plus";
import {roleDeptTreeselect} from "@/api/system/dept.ts";
import {delLogininfor, logininforList} from "@/api/system/monitor/logininfor.ts";
import {delRole} from "@/api/system/role.ts";

const {proxy} = getCurrentInstance();
onMounted(() => {
  getList()
})
const queryForm = ref(
    {
      pageNum: 1,
      pageSize: 10,
      ipaddr: undefined,
      userName: undefined,
      status: undefined,
    }
)
const total = ref(0)

const defaultProps = {
  children: "children",
  label: "label",
};
// 状态数据字典
const statusOptions = ref<any>([
  {
    value: "0",
    label: "正常",
  }, {
    value: "1",
    label: "停用",
  },
]);


// 选中数组
const ids = ref<any>();
const resetClick = () => {
  queryForm.value = {
    pageNum: 1,
    pageSize: 10,
    ipaddr: undefined,
    userName: undefined,
    status: undefined,
  }
  dateRange.value = [];
  getList()
}
const getList = () => {
  console.log("queryForm", queryForm.value)
  logininforList(addDateRange(queryForm.value, dateRange.value)).then(
      (response: any) => {
        tableData.value = response.rows;
        total.value = parseInt(response.total);
      }
  );
}
const tableData = ref<Array<Object>>([])

const tableColumn = ref<Array<Object>>([
  {
    label: '访问编号',
    prop: 'infoId',

  },
  {
    label: '用户名称',
    prop: 'userName',

  },
  {
    label: '地址',
    prop: 'ipaddr',

  }, {
    label: '登录地点',
    prop: 'loginLocation',
  }, {
    label: '操作系统',
    prop: 'os',
  }, {
    label: '浏览器',
    prop: 'browser',
  }, {
    label: '描述',
    prop: 'msg',
  }, {
    label: '状态',
    prop: 'status',
  }, {
    label: '登录时间',
    prop: 'loginTime',
  }, {
    label: '操作',
    prop: 'edit',
    slot: true,
  },
])


const handleQuery = () => {
  getList()
}

// 日期范围
const dateRange = ref<any>();

const handleDelete = (row: any) => {
  const infoIds = row.infoId || ids.value;
  ElMessageBox.confirm('是否确认日志编号为"' + infoIds + '"的数据项?',)
      .then(() => {
        return delLogininfor(infoIds);
      })
      .then((response: { code: number; }) => {
        if (response.code === 200) {
          getList();
          ElMessage({message: "删除成功", type: 'warning'})
        }
      }).catch(() => {

    console.log("删除操作取消");
  });
};


</script>
<style scoped>

</style>
